<template>
  <div :class='s.wrap'>
    <div :class='s.up'>
      <div :class='s.header'>
        <img :src='game.GAME_KIND, game.CREATER_HEAD | filterGameCreaterHeader'>
      </div>
      <div :class='s.creater'>
        创建人
        <div>{{game.GAME_KIND=="1"?game.CREATER_COMPANY:game.CREATER_NICKNAME}}</div>
      </div>
      <div :class='s.timer'>
        <div :class='{[s.gameOver]: game.GAME_STEP === "4"}'>{{ gameStep }}</div>
        <div v-if='registered && game.GAME_PWD && game.GAME_PWD !== ""' :class='s.gamePWD'>参赛口令：{{game.GAME_PWD}}</div>
        <!-- <div :class='s.time' v-if='game.GAME_STEP === "0"'>
          <div>{{ beginTime.h}}</div>
          :
          <div>{{ beginTime.m}}</div>
          :
          <div>{{ beginTime.s}}</div>
        </div> -->
      </div>
    </div>
    <div :class='s.mid'>
      <div :class='s.itemWrap'>
        <span><i class='iconfont icon-yuanbao'></i></span>
        <span :class='s.item'>
          <div>当前奖池已累积</div>
          <div :class='s.value'><span>{{ game.GAME_AMOUNT | cutNumber}}</span>君元宝</div>
        </span>
      </div>
      <div :class='s.itemWrap'>
        <span><i class='iconfont icon-shijian'></i></span>
        <span :class='s.item'>
          <div>比赛时间</div>
          <div :class='s.value'>{{game.BEGIN_DATE, game.END_DATE | filterGameBeginEndDate}}</div>
        </span>
      </div>
    </div>
    <div :class='s.down'>
      <div :class='[s.stripe , {[s.loading]: isLoading}]' v-if='isLoading'></div>
      <template v-else>
        <o-v-join 
          :amount='game.GAME_NEED_AMOUNT' 
          :isVisitor='isVisitor'
          :gameID='game.GAME_ID'
          :isGamePWD='game.IS_GAMEPWD'
          :gamePWD='game.GAME_PWD'
          :gameStep='game.GAME_STEP'
          :hasJoinDate='hasJoinDate'
          v-if='!registered && game.GAME_STEP !== "4"'></o-v-join>
        <!-- <o-v-join 
          :amount='game.GAME_NEED_AMOUNT' 
          :isVisitor='isVisitor'
          :gameID='game.GAME_ID'
          :isGamePWD='game.IS_GAMEPWD'
          :gamePWD='game.GAME_PWD'
          v-if='!registered && (game.GAME_STEP === "1" || (game.GAME_STEP === "3" && !hasJoinDate))'></o-v-join> -->
        <o-v-registered v-if='registered'
          :gameStep='game.GAME_STEP'
          :gameBeginDate='game.BEGIN_DATE'
          :gameName='game.GAME_NAME'></o-v-registered>
      </template>
    </div>
  </div>
</template>

<script>
import Constant from 'common/constant'
import LocalDAO from 'common/localDAO'
import RemoteDAO from 'common/remoteDAO'

import filterGameCreaterHeader from 'filters/filterGameCreaterHeader'
import filterGameStage from 'filters/filterGameStage'
import filterGameBeginEndDate from 'filters/filterGameBeginEndDate'
import cutNumber from 'filters/cutNumber'
import OVJoin from 'components/game/detail/OVJoin'
import OVRegistered from 'components/game/detail/OVRegistered'
export default {
  components: {
    OVJoin, OVRegistered
  },
  filters: { filterGameCreaterHeader, filterGameStage, cutNumber, filterGameBeginEndDate },
  props: {
    game: {
      type: Object,
      default: function () {
        return {
          GAME_ID: '',
          GAME_STEP: '0',
          BEGIN_DATE: '',
          END_DATE: '',
          GAME_NEED_AMOUNT: '0',
          JOIN_BEGIN_DATE: ''
        }
      }
    }
  },
  data () {
    return {
      beginTimer: null,
      beginTime: {
        h: '00',
        m: '00',
        s: '00'
      },
      isLoading: true,
      isVisitor: false,
      registered: false
    }
  },
  computed: {
    gameStep: function () {
      switch (this.game.GAME_STEP) {
        case '0': 
          return '未开赛'
        case '1':
          return '报名中'
        case '2':
          return '报名结束，等待比赛开始'
        case '3':
          return '进行中'
        case '4':
          return '已结束'
        case '5':
          return '比赛无效'
        default:
          return '比赛无效'
      }
    },
    hasJoinDate: function () {
      if (!this.game.JOIN_BEGIN_DATE || this.game.JOIN_BEGIN_DATE === '' || this.game.JOIN_BEGIN_DATE === '0'){
        return false
      }
      return true
    }
  },
  mounted () {
    this.checkRegistered()
  },
  methods: {
    /**
     * 检查是否参加了比赛
     * @return {Boolean}
     */
    checkRegistered () {
      let userCode = LocalDAO.getUserCode()
      if (!userCode || userCode == '') {//游客
        this.isVisitor = true
        this.isLoading = false
        return false
      }
      let params = {
        userCode: userCode,
        actionFlag: '1',
        pageSize: '1',
        pageNo: '1',
        totalFlag: '0',
        gameKind: '',
        gameID: this.game.GAME_ID
      }
      RemoteDAO.callUC12008303(params, response => {
        console.info('callUC12008303', response)
        if ( response.error !== '0'){
          this.$store.dispatch('setTip', {text: response.data})
          return;
        } else {
          if (response.data.body.length > 0 && response.data.body[0].GAME_ID === this.game.GAME_ID){
            this.registered = true
            this.$emit('registered', true)
          }
          this.isLoading = false
        }
      });
    }
  }
}
</script>
<style lang="less" module='s'>
.wrap{
  background-color: #f7743a;
  color: #fff;
  padding-bottom: 25px;
  .up{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 10px;
    padding: 5px 0;
    border-bottom: dashed 1px rgba(255, 255, 255, 0.5);
    .header{
      background-color: #f8f8f8;
      width: 38px;
      height: 38px;
      line-height: 38px;
      margin: 5px;
      border-radius: 50%;
      text-align: center;
      box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 0.5), 
                  -1px -1px 1px 1px rgba(255, 255, 255, 0.5), 
                  -1px 1px 1px 1px rgba(255, 255, 255, 0.5), 
                  1px -1px 1px 1px rgba(255, 255, 255, 0.5);
      img{
        width: 90%;

      }
    }
    .creater{
      flex: 1;
      margin-left: 5px; 
    }
    .timer{
      font-size: 16px;
      text-align: right;
      color: #fffc9d;
      .gameOver{
        color: #000;
      }
      .gamePWD{
        background-color: #dc5326;
        padding: 2px 5px;
        font-size: 12px;
        border-radius: 5px;
      }
      .time{
        color: #832d16;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 18px;
        div{
          color: #fff782;
          padding: 0 2px;
          background-color: #832d16;
          border-radius: 5px;
        }
      }
    }
  }
  .mid{
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    .itemWrap{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      i{
        background-color: #dc5326;
        border-radius: 50%;
        font-size: 18px;
        color: #ff9a6d;
        padding: 5px;
      }
      .item{
        // flex: 1;
        font-size: 12px;
        margin-left: 5px;
        display: inline-block;
        .value{
          font-size: 15px;
          font-weight: bold;
        }
      }
    }
  }
  .down{
    margin: auto;
    text-align: center;
    font-size: 12px;
    span{
      color: #fff005;
    }
    .stripe{
      height: 48px;
      background-repeat: repeat;
      background-size: 30px 30px;
      -webkit-background-size: 30px 30px;
      background-image: linear-gradient(-45deg,#ee6c33 25%,transparent 25%,transparent 50%,#ee6c33 50%,#ee6c33 75%,transparent 75%,transparent);
      background-image: -webkit-linear-gradient(-45deg,#ee6c33 25%,transparent 25%,transparent 50%,#ee6c33 50%,#ee6c33 75%,transparent 75%,transparent);
    }
    .loading{
      animation: abg 10s linear infinite;
    }
    @keyframes abg{
      from {background-position: 0 0;}
      to {background-position: 100% 0;}
    }
  }
}
</style>